/* eslint-disable camelcase */
import React, { Component } from "react";
import { connect } from "react-redux";
import "./xhfPayRet.scss";
import { Toast } from "antd-mobile";
import Banner from "@/views/viewCommon/Banner";
import yhTools from "@tools/yh";
import { InterfaceG } from "@config/Config";
import XFButton from "../../../../xfCompontent/xfButton/xfButton";
import subPayUrl from "@images/imageXHF/subPay.png";
import PayingUrl from "@images/imageXHF/newPaying.png";
import openUrl from "@images/imageXHF/openFail.png";
import successUrl from "@images/imageXHF/paySuccess.png";
import { setRepaymentMoney } from "../../../../Redux/Action/repayment/repaymentMoney";
import MainLayout from "@component/mainLayout/mainLayout";

class xhfPayRet extends Component {
	constructor(props) {
		super(props);
		this.state = {
			btnText: "倒计时5s",
			respCode: "",
			retText: "还款处理中",
			message: "",
			imgUrl: PayingUrl,
			tipText: "已提交申请，等待处理",
			time: 5,
			stateSign: true,
			bannerList: []
		};
	}

	componentDidMount() {
		const urlParams = this.props.location.state;
		this.payXHFConfirm(urlParams);
		this.getBannerList();
	}
	//倒计时
	countDown() {
		const _this = this;
		let { time } = this.state;
		this.timer = setInterval(() => {
			if (time < 1) {
				//倒计时5秒后，自动将状态改为还款中
				clearInterval(_this.timer);
				this.setState({
					retText: "还款中",
					imgUrl: subPayUrl,
					tipText: "请稍后查看还款结果",
					stateSign: false,
					btnText: "返回首页"
				});
			} else {
				time--;
				_this.setState({
					time,
					btnText: `倒计时${time}s`
				});
			}
		}, 1000);
	}
	/**
	 * 小辉付还款
	 * @param data
	 */
	payXHFConfirm(data) {
		this.countDown();
		const params = {
			url: `/api-billing-application/repayment/xhf/bankPayConfirm`,
			params: {
				orgi_trans_no: data.orgi_trans_no,
				verifyCode: data.verifyCode,
				billNo: data.billNo,
				amount: data.amount,
				channelNo: data.channelNo,
				preTransNo: data.preTransNo
			},
			_alertShow: false
		};
		Toast.loading("正在提交中...", 100, () => {});
		yhTools
			.request(params)
			.then(res => {
				clearInterval(this.timer);
				Toast.hide();
				if (res.code == "0" && this.state.stateSign) {
					this.props._setRepaymentMoney({ totalLoanFee: null, type: "" });
					const respCode = res.data.respCode;
					if (respCode == "1111") {
						//0000：成功；1111 ：处理中；9997 ：重复支付；9999 ：失败
						this.setState({
							retText: "还款中",
							imgUrl: subPayUrl,
							tipText: "请稍后查看还款结果",
							btnText: "返回首页"
						});
					} else if (respCode == "0000") {
						this.setState({
							retText: "还款成功",
							imgUrl: successUrl,
							tipText: "",
							btnText: "返回首页"
						});
					} else if (respCode == "9999") {
						this.setState({
							retText: "还款失败",
							imgUrl: openUrl,
							tipText: res.data.respMsg,
							btnText: "返回首页"
						});
					}
				} else {
					Toast.info(res.message, 2);
				}
			})
			.catch(() => {
				Toast.hide();
			});
	}
	btnFn() {
		if (this.state.retText == "还款处理中") {
			return;
		}
		location.replace("#/xhfHomeCredit");
	}
	/**获取banner */
	getBannerList() {
		const params = {
			url: InterfaceG.getBannerListByPageType,
			params: {
				pageType: "XHF_REPAYMENT_RESULT_PAGE"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const { code } = res;
			if (code == "0") {
				if (res.data && res.data.length > 0) {
					res.data.forEach(item => {
						if (item.bannerType == "XHF_REPAYMENT_RESULT_BANNER") {
							this.setState({
								bannerList: item.indexServerDtos ? item.indexServerDtos : []
							});
						}
					});
				}
			}
		});
	}
	render() {
		const headerParams = {
			header: {
				title: "还款结果",
				goBackPath:
					this.props.getAppPlatformsDatas.lnid == "802" ? "xhdHome" : "billHome"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: "1" // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		const btnStyle = {
			height: "0.80rem",
			width: "6.96rem",
			borderRadius: ".40rem"
		};

		const { tipText, btnText, bannerList } = this.state;
		let but = (
			<XFButton
				handleBtn={this.btnFn.bind(this)}
				btText={btnText}
				btnStyle={btnStyle}
			/>
		);
		return (
			<MainLayout pageParams={headerParams}>
				<div className="openFail">
					<div className="openFail-box">
						<img src={this.state.imgUrl} />
						<h3>{this.state.retText}</h3>
						<p>{tipText}</p>
					</div>
					{but}
					{bannerList &&
						bannerList.length > 0 &&
						this.state.retText == "还款成功" && (
							<Banner bannerList={bannerList} history={this.props.history} />
						)}
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_setRepaymentMoney: options => {
			dispatch(setRepaymentMoney(options));
		}
	};
}

const xhfPayRetPage = connect(mapStateToProps, mapDispatchToProps)(xhfPayRet);
export default xhfPayRetPage;
